<template>
	<view class="content">
		<view class="hot">
			<view class="hotList">
				<block v-for="(a,b) in hotList" :key="b">
					<view class="hotItem" @click="onWebView(a)">
						<image :src="a.img" mode=""></image>
						<text>{{a.title}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				//路由导航列表
				hotList:[
					{
						img:'/static/home/hot1.png',//左侧菜单图标
						url:'https://www.redcross668.com/Home/Index?areaId=940',//要跳转的url地址
						title:'杭红荟'
					},
					{
						img:'/static/home/hot2.png',//左侧菜单图标
						url:'https://hzgsapp3.hzgsredcross.org.cn/Home.aspx?f=1',//要跳转的url地址
						title:'救在身边'
					},
					{
						img:'/static/home/hot3.png',//左侧菜单图标
						url:'http://app15.hzgsredcross.org.cn/Home/Default',//要跳转的url地址
						title:'杭红捐赠'
					}
				]
			}
		},
		methods: {
			//跳转列表对应页面
			onWebView({url}){
			  // #ifdef  H5
			  if(url){
			    window.location.href=url;
			  }
			  // #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 30rpx 0 10rpx 0;
		.hotList{
			display: flex;
			justify-content: space-around;
		}
		.hotItem{
			width: 33%;
			margin-right: 20rpx;
			padding: 16rpx 0;
			// background: #F1F8FF;
			// border: 5rpx solid #F1F8FF;
			box-shadow: 0 8rpx 12rpx 0 rgba(0, 0, 0, 0.1);
			text-align: center;
		}
		.hotItem:first-child{
			background: #EEEDFB;
			border: 5rpx solid #EEEDFB;
			margin-left: 10rpx;
		}
		.hotItem:nth-child(2){
			background: #FEF6E9;
			border: 5rpx solid #FEF6E9;
		}
		.hotItem:last-child{
			background: #E6F9FF;
			border: 5rpx solid #E6F9FF;
			margin-right: 10rpx;
		}
		.hotItem image{
			width: 50rpx;
			height: 48rpx;
		}
		.hotItem text{
			margin-top: 15rpx;
			display: block;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
